<script setup>
import { ref, shallowRef } from "vue";
import { useMyStore } from "../../store/index";
import image from "../previewComponnt/image.vue";
import video from "../previewComponnt/video.vue";
import text from "../previewComponnt/text.vue";
import btn from "../previewComponnt/botton.vue";
const props = defineProps(["item", "onCurrentItem", "index"]);
let pageIndex;
let pageContent;

const componentOption = shallowRef({
  image,
  video,
  text,
  btn,
});
const containerWidth = ref(pageContent?.style.with || 50);
const containerHeight = ref(pageContent?.style.height || 10);
const containerLeft = ref(pageContent?.style.left);
const containerTop = ref(pageContent?.style.top);
const isDraggingContainer = ref(false);
const startX = ref(0);
const startY = ref(0);
const dragY = ref();
const dragX = ref();
const Wa = ref();
const Wb = ref();
const containerRef = ref();
let currentY = 0;
let currentX = 0;
const startDragContainer = (event) => {
  isDraggingContainer.value = true;
  const pageItem = useMyStore().customArtwork.pageContent[pageIndex];
  startX.value = event.touches[0].clientX - currentX;
  startY.value = event.touches[0].clientY - currentY;
  pageIndex = useMyStore().pageIndex;
  pageContent = useMyStore().customArtwork.pageContent[pageIndex][props.index];
  (pageItem || []).forEach((element) => {
    element.selectCurrent = false;
  });
  pageContent.selectCurrent = true;
  props.onCurrentItem(props.index);
};
let topPercentage, leftPercentage;
const dragContainer = (event) => {
  if (!isDraggingContainer.value) return;
  currentX = event.touches[0].clientX - startX.value;
  currentY = event.touches[0].clientY - startY.value;
  const parentHeight = containerRef.value.parentNode.offsetHeight;
  const parentWidth = containerRef.value.parentNode.offsetWidth;

  topPercentage = (currentY / parentHeight) * 100;
  leftPercentage = (currentX / parentWidth) * 100;

  // 设置 div 的 top 和 left 属性为百分比值
  containerTop.value = `${topPercentage}%`;
  containerLeft.value = `${leftPercentage}%`;
  pageContent.style.left = containerLeft.value;
  pageContent.style.top = containerTop.value;
};

let startWidth, startHeight;
const startResize = (event) => {
  dragX.value = event.touches[0].clientX;
  dragY.value = event.touches[0].clientY;
  startWidth = parseFloat(
    (getComputedStyle(containerRef.value).width.match(/\d+/)[0] /
      containerRef.value.parentElement.clientWidth) *
      100
  );
  startHeight = parseFloat(
    (getComputedStyle(containerRef.value).height.match(/\d+/)[0] /
      containerRef.value.parentElement.clientHeight) *
      100
  );
  if (containerRef.value) {
    Wb.value = containerRef.value.offsetHeight;
    Wa.value = containerRef.value.offsetWidth;
  }
};
const resize = (event) => {
  containerWidth.value =
    startWidth +
    ((event.touches[0].clientX - dragX.value) /
      containerRef.value.parentElement.clientWidth) *
      100;
  containerHeight.value =
    startHeight +
    ((event.touches[0].clientY - dragY.value) /
      containerRef.value.parentElement.clientHeight) *
      100;
  pageContent.style.with = containerWidth.value;
  pageContent.style.height = containerHeight.value;
};
const stopResize = () => {
  dragX.value = dragY.value = null;
};
</script>
<template>
  <div
    class="container"
    :style="{
      width: containerWidth + '%',
      height: containerHeight + '%',
      left: containerLeft,
      top: containerTop,
      border: item.selectCurrent ? '1px solid #FFFFFF' : '',
      zIndex: item.zIndex,
    }"
    @touchstart.stop.prevent="startDragContainer"
    @touchmove.stop.prevent="dragContainer"
    @touchend.stop.prevent="stopDrag"
    ref="containerRef"
  >
    <component :is="componentOption[props.item.name]" :content="props.item" />

    <van-icon
      v-if="props.item.selectCurrent"
      class="handle"
      name="replay"
      @touchstart.stop.prevent="startResize"
      @touchmove.stop.prevent="resize"
      @touchend.stop.prevent="stopResize"
    />
  </div>
</template>

<style lang="less" scoped>
img {
  width: 100%;
  height: 100%;
}
.container {
  position: fixed;
}

.handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
</style>
